<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fns" uri="/WEB-INF/tld/fns.tld" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/meet.css"/>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap-min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/css/mdui.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script>
    <link href="${pageContext.request.contextPath}/static/raty-master/lib/jquery.raty.css" type="text/css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/static/raty-master/lib/jquery.raty.js" type="text/javascript"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/dist/css/layui.css" type="text/css" rel="stylesheet"/>
    <!-- 引入 layui.js -->
    <script src="${pageContext.request.contextPath}/static/layui/dist/layui.js" type="text/javascript"></script>
    <style>#navbar-default {background-color: #71BD71;}</style>

</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">



<div data-role="page" id="pageone" style="margin-top: 40px">
    <div id="header" style="height: 13px">
        <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
             style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;margin-bottom: 10px;border: 0">
            <div class="row">
                <div class="container-fluid" id="fluid">
                    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                        <a class="navbar-brand" href="/boke/login.jsp"
                           style="padding-left: 3px;">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        </a>
                    </div>
                    <div class="col-lg-10 col-md-10 col-xs-10 col-sm-10" style="position: relative"></div>
                    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style="padding-left: 0px"></div>
                </div>
            </div>
        </nav>
        <br><br>
    </div>
    <ul class="breadcrumb" style="margin-bottom: 2px">
        <li><a href="#">会诊大厅</a></li>
        <li><a href="#">会诊管理</a></li>
        <li class="active">留言评论</li>
    </ul>
    <p align="center">群爱智慧医疗远程诊疗会第九十四期</p>
</div>
<div style="margin-top: 120px;"></div>
    <div class="mdui-container">
        <c:forEach items="${sysUserlist}" var="sysuser" varStatus="index">
    <div class="mdui-row">
        <div class="mdui-col-xs-12">
            <div class="mdui-card">
                <div class="mdui-card-header">
                    <img class="mdui-card-header-avatar" src="https://cdn.w3cbus.com/mdui/docs~1/static/6f40c42e0eceb58345d3.jpg"/>
                    <div class="mdui-card-header-title">${sysuser.name}</div>
                    <div class="mdui-card-header-subtitle">专家</div>
                </div>
                <div class="mdui-card-content">总体评价：<span id="star${index.index}" data-path="${pageContext.request.contextPath}/static/raty-master/lib/images"></span>
                <span></span></div>
                <div class="mdui-card-actions">
                    <c:choose>
                        <c:when test="${!fns:isAppraise(sysUserId,appointmentId,sysuser.id)}">
                            <button onclick="assess('${index.index}')" class="mdui-btn mdui-btn-dense mdui-float-right mdui-color-green mdui-ripple">评价</button>
                        </c:when>
                        <c:otherwise>已评价</c:otherwise>
                    </c:choose>
                       <%-- <c:if test="${!fns:isAppraise(sysUserId,appointmentId,sysuser.id)}">
                            <button onclick="assess('${index.index}')" class="mdui-btn mdui-btn-dense mdui-float-right mdui-color-green mdui-ripple">评价</button>
                        </c:if>--%>
                </div>
            </div>
        </div>
    </div>
        <div id="appraise${index.index}" style="display: none" class="mdui-row">
            <form id="form${index.index}">
                <input type="hidden" name="appointmentId" value="${appointmentId}">
                <input type="hidden" name="sysUserId" value="${sysuser.id}">
                <input type="hidden" name="userId" value="${sysUserId}">
            <div class="mdui-col-xs-12">
                <div class="mdui-card" style="height: 100%">
                    <div class="mdui-card-header">
                        <img class="mdui-card-header-avatar" src="https://cdn.w3cbus.com/mdui/docs~1/static/6f40c42e0eceb58345d3.jpg"/>
                        <div class="mdui-card-header-title">${sysuser.name}</div>
                        <div class="mdui-card-header-subtitle">专家</div>
                    </div>
                    <div class="mdui-card-content">总体评价：<span id="appraisestar${index.index}" data-path="${pageContext.request.contextPath}/static/raty-master/lib/images"></span>
                        <span></span></div>
                    <div class="mdui-card-actions">
                    </div>
                </div>
            </div>
            </form>
        </div>
        <div class="mdui-row" style="height: 20px "></div>
        </c:forEach>

</div>
</body>

<script>
    $(document).ready(function(){

        var arr=[];
        arr.push('不满意','不满意','一般', '比较满意', '非常满意');
        var obj = JSON.parse('${ratynumber}');
        for(var i in obj){
            var score=Math.round(obj[i].number);
            $("#star"+i).raty({
                halfShow:true,
                score:score,
                hints:arr,
                readOnly:true
            });
            $("#star"+i).next().text(arr[score-1]);
        }

        $('[id^="appraisestar"]').each(function () {
            $(this).raty({
                halfShow:true,
                hints:arr,
                number:5,
                half:true,
                scoreName:"score",
                click:function (score){
                     score = score.toFixed(0);
                    $(this).next().text(arr[score-1]);
                }

            });
        })


    });

    function assess(v){
        layer.open({
            type: 1,
            title: '专家评价',
            shadeClose: true,
            btn:'提交',
            shade: 0.8,
            closeBtn: 0, //不显示关闭按钮
            area: ['380px', '50%'],
            content: $('#appraise'+v), //iframe的url
            yes:function () {
                $.ajax({
                    url:"${pageContext.request.contextPath}/appraise/save",
                    data: $('#form'+v).serialize(),
                    type:"post",
                    success:function(result){
                        layer.msg("提交成功", {icon: 6,time:1000},function(){
                            location.reload();
                        });
                    }});
            }
        });

    }
</script>
</html>
